<template>
	<div class="page-common-layout">
		<div class="page-common-left" style="width:25%;padding: 0">
            <div class="header">
                    <span class="title">{{$ct("mdataOrganizationIndex","组织机构")}}</span>
                        <span>
                            <a-icon type="more" @click="openOrgView" />
                        </span>
                    </div>
            <div class="padding-xs">
                <a-input-search placeholder="组织机构名称" style="width: 100%" @search="onSearch"/>
            </div>
            <div class="body">
                <ZTree ref="masterList" :columns="columns" rowKey="uuid" :url="url" :parameter="parameter" :masterMust="false"
                    :formatConditions="false" :showSearch="false" :loadAll="true" treeText="orgName" @rowClick="
                    (e) => {
                        masterRowClick(e);
                    }
                    ">
                </ZTree>
            </div>
		</div>
		<div class="page-common-content">
			<tool-bar @search="$refs.subList.refresh(true)" @reset="
					() => {
						(subQueryParam = {}), $refs.subList.refresh(true);
					}
				">
				<template slot="toolForm">
					<a-form-item label="账号">
						<a-input v-model="subQueryParam.userNameId" placeholder="账号" />
					</a-form-item>
					<a-form-item :label="$ct('fullName','姓名')">
						<a-input v-model="subQueryParam.userName" :placeholder="$ct('fullName','姓名')" />
					</a-form-item>
				</template>
			</tool-bar>
			<DataGrid
				ref="subList"
				type="sub"
				:url="url"
				:columns="subColumns"
				:showRowSelect="false"
				:queryParam="subQueryParam"
				rowKey="uuid" showPagination="auto" @rowClick="
					(e) => {
						subRowClick(e);
					}
				">
				<span slot="renderUserHeadPortrait" slot-scope="{ text }">
				  <img
				    :src="text"
				    alt=""
				    class="business-license"
				    @click="preViewHeadPortrait(text)"
				  />
				</span>
				<span slot="renderUserStatus" slot-scope="{ text }">
					<a-tag :color="text === 'UserInfoStatus.01' ? 'green' : 'red'">
						{{ text | statusFilter }}
					</a-tag>
				</span>
				<span slot="renderUserLock" slot-scope="{ text }">
					<a-tag :color="text === 'UserLock.01' ? 'green' : 'red'">
						{{ text | lockFilter }}
					</a-tag>
				</span>
                <span slot="renderUserConfidentiality" slot-scope="{ text }">
					{{ text | userConfidentialityFilter }}
				</span>
                <span slot="renderUserSecurityLevel" slot-scope="{ text }">
					{{ text | userSecurityLevelFilter }}
				</span>
				<span slot="renderAction" slot-scope="{ text, record }">
					<template>
						<a @click="handleEdit(record, $refs.masterList.data, 'sub')">{{$ct("edit","编辑")}}</a>
					</template>
				</span>
			</DataGrid>
            <edit ref="subModal" :visible="subVisible" :model="subMdl" @cancel="handleCancel('sub')" @ok="handleOk('sub')"/>
		</div>
	</div>
</template>
<script>
	import { DataGrid, ZTree } from "@/components";
    import edit from "./editLevel.vue"
    import { treeGridMixin } from "@/mixins/treeGridMixin";
	export default {
        mixins: [treeGridMixin],
		components: {
			DataGrid,
            edit,
		},
		data() {
			return {
				key: "1",
				columns: [{
					title: "组织机构",
					align: "left",
					dataIndex: "text",
					langCode: "mdataOrganizationIndex"
				}],
				subColumns: [{
						title: "头像",
						align: "center",
						dataIndex: "userHeadPortrait",
						scopedSlots: {
							customRender: "renderUserHeadPortrait",
						},
						width: 100
					},{
						title: "账号",
						align: "center",
						dataIndex: "userNameId",
						width: 150
					},
					{
						title: "姓名",
						align: "center",
						dataIndex: "userName",
						langCode: "fullName",
						width: 150
					},
					{
						title: "所属组织",
						align: "center",
						dataIndex: "orgName",
						langCode: "null",
					},
					{
						title: "账号状态",
						align: "center",
						dataIndex: "userStatus",
						scopedSlots: {
							customRender: "renderUserStatus",
						},
						width: 80
					},
					{
						title: "锁定状态",
						align: "center",
						dataIndex: "userLock",
						scopedSlots: {
							customRender: "renderUserLock",
						},
						width: 80
					},
                    {
						title: "密级",
						align: "center",
						dataIndex: "userConfidentiality",
                        scopedSlots: {
							customRender: "renderUserConfidentiality",
						},
						width: 150
					},
					{
						title: "安全级别",
						align: "center",
						dataIndex: "userSecurityLevel",
                        scopedSlots: {
							customRender: "renderUserSecurityLevel",
						},
						width: 150
					},
					{
						title: "操作",
						align: "center",
						dataIndex: "action",
						width: 60,
						scopedSlots: {
							customRender: "renderAction",
						},
						fixed: "right"
					},
				],
				// 查询参数
				queryParam: {},
				subQueryParam: {},
				url: {
					fathersUrl: "/mdata/organization/getTreeSysOrganization",
					expandUrl: "/mdata/organization/getListByPid",
					subList: "/mdata/user/getPageSet",
					subSave: "/mdata/user/save",
					subUpdate: "/mdata/user/update",
					subDelete: "/mdata/user/delete",
					getUserPost: "/mdata/sysUserPost/getPageSet",
					savePosition: "/mdata/user/savePosition",
					updatePosition: "/mdata/sysUserPost/update",
					delUserPost: "/mdata/sysUserPost/deleteBatch",
				},
				parameter: {
					father: {
						levelId: 1,
						pid: 1,
					},
					children: {},
				},
				postQueryParam: {},
                subMdl: {},
                subVisible: false,
				viewOrgVisible: false,
				visibleViewImg: false,
				imgSrc: "",
			};
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					"UserInfoStatus.01": "正常",
					"UserInfoStatus.02": "锁定",
					"UserInfoStatus.03": "禁用",
					"UserInfoStatus.04": "离职",
					"UserInfoStatus.05": "注销",
					"UserInfoStatus.06": "删除"
				};
				return statusMap[status];
			},
			lockFilter(lock) {
				const lockMap = {
					"UserLock.01": "正常",
					"UserLock.02": "锁定",
				};
				return lockMap[lock];
			},
            userConfidentialityFilter(Confidentiality) {
				const ConfidentialityMap = {
					"userConfidentiality.01": "核心涉密人员",
					"userConfidentiality.02": "一般涉密人员",
				};
				return ConfidentialityMap[Confidentiality];
			},
            userSecurityLevelFilter(Security) {
				const SecurityMap = {
					"userSecurityLevel.01": "10",
				};
				return SecurityMap[Security];
			},
		},
		methods: {
        
			masterRowClick(record) {
				this.$refs.masterList.rows = record
				this.subQueryParam.orgId = record.id;
				this.postQueryParam = {};
				this.$refs.subList.refresh();
			},
			subRowClick(record) {
				this.postQueryParam.orgId = record.orgId;
				this.postQueryParam.userNameId = record.userNameId;
			},
			//菜单搜索
			onSearch(value) {
				this.$refs.masterList.data = this.treeFilter(value, JSON.parse(JSON.stringify(this.$refs.masterList.originalData)));
			},
			//树形数据过滤
			treeFilter(value, arr) {
			  if (!arr) {
			    return []
			  }
			  let newarr = [];
			  arr.forEach(item => {
			    if (item.orgName.indexOf(value) > -1) {
			      let redata = this.treeFilter(value, item.children);
			      let obj = {
			        ...item,
			        children: redata
			      }
			      newarr.push(obj);
			    } else {
			      if (item.children && item.children.length > 0) {
			        let redata = this.treeFilter(value, item.children);
			        let obj = {
			          ...item,
			          children: redata
			        };
			        if (redata && redata.length > 0) {
			          newarr.push(obj);
			        }
			      }
			    }
			  });
			  return newarr;
			},
			openOrgView(){
				this.viewOrgVisible = true;
				this.$refs.viewOrgModal.getOrgData(this.$refs.masterList.data);
			},
			preViewHeadPortrait(val) {
			  this.imgSrc = val;
			  this.visibleViewImg = true;
			},
		}
	};
</script>

<style scope lang="less">
	.business-license{
		cursor: pointer;
		padding: 5px;
		height: 36px !important;
		width: 36px !important;
	}
	.page-common-left {
	  display: flex;
	  flex-direction: column;

	  .header {
	    display: flex;
	    width: 100%;
	    justify-content: space-between;
	    align-items: center;
	    border-bottom: 1px solid #ebeef5;
	    color: #606266;
	    padding: 10px;
	    height: 50px;
	    box-sizing: border-box;

	    .title {
	      font-size: 16px;
	    }
	  }

	  .body {
	    padding: 10px;
	    overflow: auto;
	    flex: 1;
	  }
	}
</style>
